<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Hello World</title>
  <!-- 引入 Vue 3 CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <!-- 文本插值 -->
  <h1>{{ message }}</h1>

  <!-- 绑定按钮点击事件 -->
  <button @click="reverseMessage">Reverse Text</button>

  <!-- 绑定输入框 -->
  <input v-model="inputText" placeholder="Type something...">
  <p>You typed: {{ inputText }}</p>
</div>

<script>
  // Vue 3 组合式 API
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      // 响应式数据
      const message = ref('Hello Vue 3!');
      const inputText = ref('');

      // 方法
      const reverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
      };

      // 暴露给模板
      return {
        message,
        inputText,
        reverseMessage
      };
    }
  }).mount('#app');
</script>
</body>
</html>